<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/login.css" />
		<style>
			input::placeholder {
				color: white;
			}

			.mui-input-group {
				background-color: #ffffff00;
				margin-top: 20%;
			}

			#bgimg {
				width: 100%;
				height: 100%;
				display: block;
				position: absolute;
				top: 0;
				z-index: -3;
			}

			#logoimg {
				width: 160px;
				height: 160px;
				display: block;
				margin: 10% auto;
				;
			}

			.mui-btn {
				border-radius: 30px;
				font-size: 18px;

			}

			#adminlogin {
				width: 120px;
				margin-left: 65%;
				background-color: #5DB1FA;
				/* color: #FFFFFF; */
			}

			#login,
			#register {
				width: 160px;
				height: 45px;
				line-height: 10px;
			}
		</style>
	</head>
	<body>
		<img id='bgimg' src="../img/login2.png" alt="" />

		<div id="box">
			<button id="adminlogin" type="button" class="mui-btn" style="font-size: 16px">管理员登录</button>
		</div>
		<img id="logoimg" src="../img/logo-lan-queding.png" alt="" />

		<p style="text-align: center;color: white;font-family: 隶书;font-size: 50px;">智慧社区</p>

		<form class="mui-input-group">

			<div class="mui-input-row">
				<input type="text" id="phone" class="mui-input-clear" placeholder="请输入手机号">
			</div>
			<div class="mui-input-row" style="margin-bottom: 15px;">
				<input type="password" id="pwd" class="mui-input-clear" placeholder="请输入密码">
			</div>

			<div
				style=" width:100%;font-size:14px;margin-left: auto;margin-right: auto;;display:flex;align-items: center;height: 30px;">
				<div style="margin-left: auto;margin-right: auto;margin-bottom: 15px;width: 83%;">
					<input type="checkbox" id="agreeCheck" style="margin-right:3px;border-radius: 3px;">
					<label id="xieyi">我已阅读并同意</label>
					<span style="color: red;"
						onclick="mui.openWindow('login-xieyi.html','login-xieyi',{})">《用户隐私政策》</span>
				</div>
			</div>

			<div id="box1">
				<button id="login" type="button" class="mui-btn mui-btn-blue mui-btn-block">登录</button>
			</div>

			<div id="box2">
				<button id="register" type="button" class="mui-btn mui-btn-block mui-btn-green">注册</button>
			</div>
		</form>



		<script src="../js/mui.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/req.js"></script>
		<script type="text/javascript">
			mui.ready(function() {

				mui.plusReady(function() {
					/**
					 * 获取本地存储中launchFlag的值
					 * http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.getItem
					 * 若存在，说明不是首次启动，直接进入首页；
					 * 若不存在，说明是首次启动，进入引导页；
					 */
					var token = localStorage.getItem("token");
					console.log("----token-----" + token)
					if (token) {
						mui.openWindow({
							url: "index.html",
							id: "index",
							extras: {
								mark: "index" //额外的参数，仅仅是个标识，实际开发中不用；
							},
							styles: {
								popGesture: "none"
							},
							show: {
								aniShow: 'none'
							},
							waiting: {
								autoShow: false
							}
						});
					} else {
						plus.navigator.closeSplashscreen();
					}

				});

				mui.init()

				mui('#box').on('tap', '#adminlogin', function() {
					console.log("跳转至管理员登录页面")
					mui.openWindow('../manager/mlogin.html', 'mlogin', {})
				})

				mui('#box2').on('tap', '#register', function() {
					console.log("跳转至注册页面")
					mui.openWindow('register.html', 'register', {})
				})

				mui('.mui-input-group').on('tap', '#login', function() {
					console.log("登录按钮绑定点击事件成功")

					var phone = $("#phone").val();
					console.log(phone)
					var pwd = $("#pwd").val();
					console.log(pwd)
					if (phone == "") {
						mui.toast('手机号不能为空')
						return;
					}
					if (pwd == "") {
						mui.toast('密码不能为空')
						return;
					}
					mui.ajax(apiurl + 'api/login', {
						data: {
							"phone": phone,
							"pwd": pwd
						},
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						headers: {
							'Content-Type': 'application/json'
						},
						success: function(data) {
							console.log(data)
							if (data.code == 200) {
								console.log("调接口成功-用户名密码校验通过")
								localStorage.setItem("token", data.token)
								mui.openWindow('index.html', 'id', {})
							} else {
								mui.toast('用户名或者密码错误')
							}
						},
						error: function(data, type) {
							console.log(type)
						}
					});

				})

			})
		</script>
	</body>
</html>